{% extends 'base.html' %}


{% block content %}


<div class="row" style="height:100%">

    <div class="col-lg-4 fill-h">
        
        <div class="row" style="height: 50%;">{{ chart("cate1",title="各岗位大类人才需求") }}</div>
        <div class="row" style="height: 50%;">{{ chart("cate2") }}</div>
    </div>


        <div class="col-lg-5 fill-h">
            {{ chart("cityMap") }}
        </div>
    
    
    <div class="col-lg-3 fill-h">
        
    </div>

</div>
    

    {% endblock %}

    {% block scripts %}
    <script type="text/javascript" src="/static/js/mapdata/city_geo.js"></script>
    <script type="text/javascript" src="/static/js/echarts-map-china.js"></script>
    <script type="text/javascript">

        //分类1的图
        var cate1Chart = jobs.initChartId("cate1")
        //分类2的图
        var cate2Chart = jobs.initChartId("cate2")

        // 地图
        var mapChart = jobs.initChartId("cityMap")

        // 分类数据
        var cateData = null;
        // 图1 点击事件
        cate1Chart.on("click",params=>{
            console.log("点击分类1")
            console.log(params)
            var cate1 = params.name
            //切换分类2
            drawCate2(cateData,cate1)
        })
        cate2Chart.on("click",params=>{
            console.log("进入工作分析")
            console.log(params.name)
            // 打开job蓝图下的index页面
            window.open("{{ url_for('job.index')}}?cate2="+params.name,"_blank");                 
        })

        // 地图点击事件
        mapChart.on("click",params=>{
            console.log(params)
        })
        // 地图切换legend时，切换y轴
        mapChart.on("legendselectchanged",function(params,e){
            console.log(params)
            //切换,this.表示当前echart实例
            var option = this.getOption()
            option.yAxis[0].show = params.selected['平均工资']
            option.yAxis[1].show = params.selected['招聘人数']
            console.log(option)
            this.setOption(option);
            
        })
    
        
        // 测试结合柱状图
        function fun_city_num(jihe) {

            var tooltip = jobs.getTooltip({
                formatter:function(params){
                    console.log(params)
                    var value = params.value;
                    // 散点图的，取第三个
                    if(params.seriesIndex==0)
                    value = value[2];
                    if(params.seriesName=="平均工资")
                    {
                        return params.name+ "<br>"+"平均工资:"+value
                    }
                    else
                    {
                        return params.name+ "<br>"+"招聘人数:"+value
                    }
                    
                }
            })
            // 散点图数据
            var numScatter = [];
            var salaryScatter = [];
            //两个系列的需要不同的x轴
            var city_salary = [];
            var bar_salary = [];

            var city_num = [];
            var bar_num = [];
            
            //地图数据
            for (var i = 0; i < jihe.length; i += 1) {
                // 当前城市的坐标
                var geo = city_geo[jihe[i].name];
                //如果有这个城市
                if (geo != undefined) {
                    console.log(jihe[i])
                    numScatter.push(
                        {
                            name: jihe[i].name,
                            value: geo.concat(jihe[i].num)
                        }
                    )
                    salaryScatter.push(
                        {
                            name: jihe[i].name,
                            value: geo.concat(jihe[i].salary)
                        }
                    )
                }
                else {
                    console.log("没有这个城市:" + jihe[i] + "的经纬度")
                }
            }
            //工资数据，按照工资排序
            jihe = jihe.sort(tools.compareBy("salary"))
            console.log("工资排序")
            console.log(jihe)
            for (var i = 0; i <20; i += 1) {
                city_salary.push(jihe[i].name)
                bar_salary.push(jihe[i].salary)
            }
            // 按照人数排序
            jihe = jihe.sort(tools.compareBy("num"))
            for (var i = 0; i < 20; i += 1) {
                city_num.push(jihe[i].name)
                bar_num.push(jihe[i].num)
            }
            
            var option6 = {
                grid:[
                    // 地图用
                    {
                        left:0
                    },
                    // 柱状图用
                    {
                        left:'80%',
                        right:0
                        
                    }
                ],
                xAxis:[
                    {
                        // 隐藏x轴
                        show:false,
                        axisLine:{
                            show:false
                        },
                        gridIndex:1,
                        type:"value",
                    }
                    
                ],
                yAxis:[
                    {
                        inverse:true,
                        position:'left',
                        show:false,
                    gridIndex:1,
                    type:"category",
                    data:city_salary
                },
                // 招聘人数的用，
                {
                    inverse:true,
                    position:'left',
                    show:true,
                    gridIndex:1,
                    type:"category",
                    data:city_num
                }

            ],
                title: {
                    text: '全国各个主要城市招聘人数',

                    x: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                legend: {
                    data: ['招聘人数',"平均工资"],
                    orient: 'vertical',
                    // 只能选择一个
                    selectedMode:'single',
                    // y: 'bottom',
                     x: 'right',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: tooltip,
                visualMap: {
                    min: 0,
                    max: 100000,
                    calculable: true,
                    inRange: {
                        color: ['#50a3ba', '#eac736', '#d94e5d']
                    },
                    textStyle: {
                        color: '#fff'
                    }
                },
                geo: {
                    map: 'china',
                    roam: true, //开启鼠标缩放和漫游
                    zoom: 0.6, //地图缩放级别
                    selectedMode: false, //选中模式：single | multiple
                    left: 0,
                    // right: 0,
                    top: 0,
                    bottom: 0,
                    layoutCenter: ['50%', '50%'], //设置后left/right/top/bottom等属性无效
                    layoutSize: '80%',
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#101f32',
                            borderWidth: 1.1,
                            borderColor: '#43d0d6'
                        },
                        emphasis: {
                            areaColor: '#069'
                        }
                    }
                },
                series: [
                    {
                    
                    name: '招聘人数',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    symbolSize: 12,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            borderColor: '#fff',
                            borderWidth: 1
                        }
                    },
                    data: numScatter,
                },
                {
                    name: '平均工资',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    symbolSize: 12,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            borderColor: '#fff',
                            borderWidth: 1
                        }
                    },
                    data: salaryScatter,
                },
                // 工资柱子
                    {
                        yAxisIndex:0,
                        name:"平均工资",
                        data:bar_salary,
                        type:"bar"
                    },
                     // 人数柱子
                        {
                            // 使用自己的城市轴
                        yAxisIndex:1,
                        name:"招聘人数",
                        data:bar_num,
                        type:"bar"
                    }
            ]


            };
            mapChart.setOption(option6);
        }

        //绘制分类2，指定要绘制的哪个cate1的cate2
        function drawCate2(data, cate1) {

            var tooltip = jobs.getTooltip({
                formatter:function(params){
                    return "职位:"+params.name+ "<br>"+"数量:"+params.value +"<br>" +"(点击进入职位分析)"
                }
            })

            // 设置cate2图表的标题
            $("#cate2-title").text(cate1+"类岗位需求")
            var cate2 = data['cate2_num'][cate1]
            var nums = []
            var cate2s = []
            for (var i = 0; i < cate2.length; i += 1) {
                nums.push(cate2[i].num)
                cate2s.push(cate2[i].cate2)
            }
            console.log("绘制cate2:")
            console.log(cate2)

            option = {
                tooltip:tooltip,
                grid:{
                    top:"5%",
                    // 字体大小12,最多6各字符串和两个点，84刚刚好，再加4
                    left:'88',
                    
                    
                },
                // 数据缩放
                dataZoom:{
                    borderColor:"transparent",
                    showDetail :false,
                    type:"slider",
                    // 前10个
                    endValue:4,
                    //控制y轴，垂直
                    orient:"vertical"
                },
                title: {
                    show:false,
                    text: "测试"
                },
                xAxis: {
                    type: "value"
                },
                yAxis: {
                    inverse:true,
                    axisLabel:{
                        interval:0,
                        // 最长六个字符串
                        formatter:function(value,index){
                            if(value.length>6)
                            return value.substring(0,6)+".."
                            else
                            return value
                        }
                    },
                    type: 'category',
                    data: cate2s
                },
                series: [
                    {
                        label:{
                            show:true,
                            position:"right"
                        },
                        itemStyle:{
                            // color:"rgba(0,191,255,0.1)"
                        },
                        type: "bar",
                        name: "cate1",
                        data: nums
                    }
                ]
            }
            cate2Chart.setOption(option)

        }
        function drawCate1(data) {

            var tooltip = jobs.getTooltip({
                formatter:function(params){
                    return "职位大类:"+params.name+ "<br>"+"数量:"+params.value +"<br>" +"(点击查看二级职位)"
                }
            })
            var cate1 = data['cate1_num'];
            var nums = []
            var cate1s = []
            for (var i = 0; i < cate1.length; i += 1) {
                nums.push(cate1[i].num)
                cate1s.push(cate1[i].cate1)
            }
            option = {
                tooltip:tooltip,
                   // 数据缩放
                   dataZoom:{
                    borderColor:"transparent",
                    showDetail :false,
                    type:"slider",
                    // 前10个
                    endValue:4,
                    //控制y轴，垂直
                    orient:"vertical"
                },
                grid:{
                    top:"5%",
                    left:'74'
                },
                title: {
                    show:false,
                    text: "分类1",
                    
                    textStyle:{
                        
                    }
                },
                xAxis: {
                    name:"招聘数量",
                    type: "value",
                    
                },
                yAxis: {
                    name:"岗位大类",
                    inverse:true,
                    type: 'category',
                    data: cate1s,
                    axisLabel:{
                        interval:0,
                        formatter:function(value,index){
                            if(value.length>4)
                            return value.substring(0,4)+".."
                            else
                            return value
                        }
                    }
                },
                series: [
                    {
                        label:{
                            show:true,
                            position:"right"
                        },
                        type: "bar",
                        name: "cate1",
                        data: nums
                    }
                ]
            }
            cate1Chart.setOption(option)
        }
         $.get("/ind2/city_data", result => {
            console.log(result)
            fun_city_num(result);
        }) 

        //请求分类数据
        $.get("/ind2/cates_num", result => {
            cateData = result;
            drawCate1(cateData)
            drawCate2(cateData, "全部")
        })
    </script>


    {% endblock scripts %}